<script type="text/javascript">
		function select(){
			$('#aa').accordion('select','Title1');
		}
		var idx = 1;
		function add(){
			$('#aa').accordion('add',{
				title:'New Title'+idx,
				content:'New Content'+idx
			});
			idx++;
		}
		function remove(){
			var pp = $('#aa').accordion('getSelected');
			if (pp){
				var index = $('#aa').accordion('getPanelIndex',pp);
				$('#aa').accordion('remove',index);
			}
		}
</script>

	<h2>折叠面板</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>单击面板标题显示它的内容。
		</div>
	</div>
	
	<div style="margin: 10px 0;">
		<a href="#" class="easyui-linkbutton" onclick="select()">选择</a>
		<a href="#" class="easyui-linkbutton" onclick="add()">增加</a>
		<a href="#" class="easyui-linkbutton" onclick="remove()">删除</a>
	</div>
	
	<div id="aa" class="easyui-accordion" style="width:700px;height:300px;">
		<div title="Title1" data-options="iconCls:'icon-ok'" style="overflow:auto;padding:10px;">
			<h3 style="color:#0099FF;"> jQuery easyui 折叠面板</h3>
			<p>折叠面板是jQuery easyui框架的一部分。它让您更容易定义的web页面上的折叠组件。<br>
			</p>
		</div>
		<div title="Title2" data-options="iconCls:'icon-search',selected:true,
				tools:[{
					iconCls:'icon-reload',
					handler:function(){
						$('#tt').datagrid('reload');
					}
				}]">
			<table id="tt" class="easyui-datagrid" 
					data-options="url:'datagrid_data2.json',border:false,fit:true,fitColumns:true,singleSelect:true">
				<thead>
					<tr>
						<th data-options="field:'itemid',width:80">Item ID</th>
						<th data-options="field:'productid',width:100">Product ID</th>
						<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
						<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
						<th data-options="field:'attr1',width:150">Attribute</th>
						<th data-options="field:'status',width:50,align:'center'">Status</th>
					</tr>
				</thead>
			</table>
		</div>
		<div title="Title3" style="padding:10px;">
			content3
		</div>
 </div>       
        <h3>页面代码： </h3>
        <p>
        <pre name="code" class="html">&lt;!DOCTYPE&nbsp;html&gt;
&lt;html&gt;
&lt;head&gt;
	&lt;meta&nbsp;http-equiv=&quot;Content-Type&quot;&nbsp;content=&quot;text/html;&nbsp;charset=UTF-8&quot;&gt;
	&lt;title&gt;Accordion&nbsp;-&nbsp;jQuery&nbsp;EasyUI&nbsp;Demo&lt;/title&gt;
	&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;type=&quot;text/css&quot;&nbsp;href=&quot;../themes/default/easyui.css&quot;&gt;
	&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;type=&quot;text/css&quot;&nbsp;href=&quot;../themes/icon.css&quot;&gt;
	&lt;link&nbsp;rel=&quot;stylesheet&quot;&nbsp;type=&quot;text/css&quot;&nbsp;href=&quot;demo.css&quot;&gt;
	&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;../jquery-1.7.2.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&nbsp;type=&quot;text/javascript&quot;&nbsp;src=&quot;../jquery.easyui.min.js&quot;&gt;&lt;/script&gt;
	&lt;script&nbsp;type=&quot;text/javascript&quot;&gt;
		function&nbsp;select(){
			$(&#39;#aa&#39;).accordion(&#39;select&#39;,&#39;Title1&#39;);
		}
		var&nbsp;idx&nbsp;=&nbsp;1;
		function&nbsp;add(){
			$(&#39;#aa&#39;).accordion(&#39;add&#39;,{
				title:&#39;New&nbsp;Title&#39;+idx,
				content:&#39;New&nbsp;Content&#39;+idx
			});
			idx++;
		}
		function&nbsp;remove(){
			var&nbsp;pp&nbsp;=&nbsp;$(&#39;#aa&#39;).accordion(&#39;getSelected&#39;);
			if&nbsp;(pp){
				var&nbsp;index&nbsp;=&nbsp;$(&#39;#aa&#39;).accordion(&#39;getPanelIndex&#39;,pp);
				$(&#39;#aa&#39;).accordion(&#39;remove&#39;,index);
			}
		}
	&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
	&lt;h2&gt;Accordion&lt;/h2&gt;
	&lt;div&nbsp;class=&quot;demo-info&quot;&gt;
		&lt;div&nbsp;class=&quot;demo-tip&nbsp;icon-tip&quot;&gt;&lt;/div&gt;
		&lt;div&gt;Click&nbsp;on&nbsp;panel&nbsp;header&nbsp;to&nbsp;show&nbsp;its&nbsp;content.&lt;/div&gt;
	&lt;/div&gt;
	
	&lt;div&nbsp;style=&quot;margin:&nbsp;10px&nbsp;0;&quot;&gt;
		&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;easyui-linkbutton&quot;&nbsp;onclick=&quot;select()&quot;&gt;Select&lt;/a&gt;
		&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;easyui-linkbutton&quot;&nbsp;onclick=&quot;add()&quot;&gt;Add&lt;/a&gt;
		&lt;a&nbsp;href=&quot;#&quot;&nbsp;class=&quot;easyui-linkbutton&quot;&nbsp;onclick=&quot;remove()&quot;&gt;Remove&lt;/a&gt;
	&lt;/div&gt;
	
	&lt;div&nbsp;id=&quot;aa&quot;&nbsp;class=&quot;easyui-accordion&quot;&nbsp;style=&quot;width:700px;height:300px;&quot;&gt;
		&lt;div&nbsp;title=&quot;Title1&quot;&nbsp;data-options=&quot;iconCls:&#39;icon-ok&#39;&quot;&nbsp;style=&quot;overflow:auto;padding:10px;&quot;&gt;
			&lt;h3&nbsp;style=&quot;color:#0099FF;&quot;&gt;Accordion&nbsp;for&nbsp;jQuery&lt;/h3&gt;
			&lt;p&gt;Accordion&nbsp;is&nbsp;a&nbsp;part&nbsp;of&nbsp;easyui&nbsp;framework&nbsp;for&nbsp;jQuery.&nbsp;It&nbsp;lets&nbsp;you&nbsp;define&nbsp;your&nbsp;accordion&nbsp;component&nbsp;on&nbsp;web&nbsp;page&nbsp;more&nbsp;easily.&lt;/p&gt;
		&lt;/div&gt;
		&lt;div&nbsp;title=&quot;Title2&quot;&nbsp;data-options=&quot;iconCls:&#39;icon-search&#39;,selected:true,
				tools:[{
					iconCls:&#39;icon-reload&#39;,
					handler:function(){
						$(&#39;#tt&#39;).datagrid(&#39;reload&#39;);
					}
				}]&quot;&gt;
			&lt;table&nbsp;id=&quot;tt&quot;&nbsp;class=&quot;easyui-datagrid&quot;&nbsp;
					data-options=&quot;url:&#39;datagrid_data2.json&#39;,border:false,fit:true,fitColumns:true,singleSelect:true&quot;&gt;
				&lt;thead&gt;
					&lt;tr&gt;
						&lt;th&nbsp;data-options=&quot;field:&#39;itemid&#39;,width:80&quot;&gt;Item&nbsp;ID&lt;/th&gt;
						&lt;th&nbsp;data-options=&quot;field:&#39;productid&#39;,width:100&quot;&gt;Product&nbsp;ID&lt;/th&gt;
						&lt;th&nbsp;data-options=&quot;field:&#39;listprice&#39;,width:80,align:&#39;right&#39;&quot;&gt;List&nbsp;Price&lt;/th&gt;
						&lt;th&nbsp;data-options=&quot;field:&#39;unitcost&#39;,width:80,align:&#39;right&#39;&quot;&gt;Unit&nbsp;Cost&lt;/th&gt;
						&lt;th&nbsp;data-options=&quot;field:&#39;attr1&#39;,width:150&quot;&gt;Attribute&lt;/th&gt;
						&lt;th&nbsp;data-options=&quot;field:&#39;status&#39;,width:50,align:&#39;center&#39;&quot;&gt;Status&lt;/th&gt;
					&lt;/tr&gt;
				&lt;/thead&gt;
			&lt;/table&gt;
		&lt;/div&gt;
		&lt;div&nbsp;title=&quot;Title3&quot;&nbsp;style=&quot;padding:10px;&quot;&gt;
			content3
		&lt;/div&gt;
	&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>
        </p>
</body></html>
